<template>
  <div class="database_wrap">
    <div class="left">
      <div class="itemLeft">
        <div class="itemLefthead">
          数据库
          <el-button
            class="bin_button"
            size="small"
            @click="adddialogshow"
            icon="el-icon-circle-plus"
            style="margin-right: 20px"
          >
            新增
          </el-button>
        </div>
        <div class="itemList">
          <el-collapse
            class="collList"
            v-model="activeNames"
            @change="handleChange"
          >
            <el-collapse-item
              v-for="(item, index) in leftTree"
              :key="index"
              :title="item.databaseTypeName.toString()"
              :name="item.databaseType"
            >
              <div v-for="(item1, index1) in item.dataTypeVoList" :key="index1">
                <div class="listitem">
                  {{ item1.dataTypeName }}
                </div>
                <div
                  :class="['item', { act: currCate === item2.dataTableId }]"
                  v-for="(item2, index2) in item1.children"
                  :key="index2"
                  @contextmenu.prevent="showContextMenu($event, item2)"
                  @click="
                    clickLeftTreeItem(item2.dataTableId, item2.dataTypeId)
                  "
                >
                  {{ item2.dataTableName }}
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
          <div
            v-if="contextMenuVisible"
            class="context-menu"
            :style="{
              top: contextMenuTop + 'px',
              left: contextMenuLeft + 'px',
            }"
          >
            <ul>
              <!-- <li @click="handleMenuItemClick('1')">编辑</li> -->
              <li @click="handleMenuItemClick('2')">删除</li>
              <!-- 更多菜单项 -->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="itemLefthead1">
        <div class="searchBox">
          <el-input
            class="bin_input"
            v-model="searchKeyWord"
            placeholder="请输入搜索内容"
            style="width: 60%"
          >
            <template slot="append">
              <el-button class="btn search" @click="clickSearch">
                查询
              </el-button>
            </template>
          </el-input>
        </div>
        <div class="btn_gro">
          <el-button
            class="bin_button"
            size="small"
            icon="el-icon-filter1"
            @click="filterShow"
          ></el-button>
          <el-button class="bin_button calcImport" @click="addyuan">
            添加数据
          </el-button>
        </div>
      </div>
      <div class="itemList">
        <div class="tableBox" ref="tableBox">
          <el-table
            :border="true"
            ref="multipleTable"
            :data="tableData"
            :fit="true"
            tooltip-effect="dark"
            style="width: 100%"
            :height="tableH"
            class="bin_table"
            @selection-change="handleSelectionChange"
          >
            <el-table-column resizable type="selection"> </el-table-column>
            <el-table-column
              min-width="170"
              resizable
              v-for="(item, index) in tableHeader"
              v-if="item.columnDisplay === '1'"
              sortable
              :key="index"
              :prop="item.columnCode"
              :label="item.columnName"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column resizable label="操作" min-width="120">
              <template slot-scope="scope">
                <img
                  class="actBtn"
                  @click="editFn(scope.row)"
                  :src="require('../../../assets/edit.png')"
                  alt=""
                />
                <img
                  class="actBtn"
                  :src="require('../../../assets/record.png')"
                  @click="record(scope.row)"
                  alt=""
                />
                <img
                  class="actBtn"
                  :src="require('../../../assets/del.png')"
                  @click="delete1(scope.row)"
                  alt=""
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pageBox">
          <div class="btn_grop">
            <el-dropdown
              v-if="currDataTypeId === '9'"
              class="dropModel"
              trigger="click"
              placement="top-end"
              @command="handleCommand"
            >
              <span class="el-dropdown-link">
                <el-button class="bin_button" size="small"> 导出 </el-button>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="excel">
                  导出数据表
                </el-dropdown-item>
                <el-dropdown-item command="file">
                  导出已选的文件
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button
              v-else
              class="bin_button"
              size="small"
              @click="exprotModelFn"
            >
              导出
            </el-button>
            <!-- <el-button class="bin_button" size="small" @click="batDelete">删除</el-button> -->
          </div>
          <div style="display: flex; align-items: center">
            <!-- <div class="pageInfo">
              <span class="size">{{ pageSize }}</span>
              条每页，共{{ total }}条
            </div> -->
            <el-pagination
              class="bin_fenyeqi"
              :current-page.sync="currPage"
              :page-sizes="[10, 50, 100, 200, 500, 1000]"
              :page-size="pageSize"
              prev-text="上一页"
              next-text="下一页"
              popper-class="bin_fenyeqi_popper"
              layout="total, sizes,->,prev, pager, next"
              @current-change="changePage"
              @size-change="handleSizeChange"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 编辑弹窗 -->
    <el-dialog
      :closeOnClickModal="false"
      class="bin_dialog"
      title="编辑"
      :visible.sync="editDialogVisible"
      width="1000px"
      top="10vh"
      v-zsdialogDrag
    >
      <edit-dialog1
        @cancel="editDialogVisible = false"
        :header="tableHeader"
        :currEdit="currEditItem"
        @confirm="editCommit"
      ></edit-dialog1>
    </el-dialog>
    <!-- 表单编辑弹窗 -->
    <el-dialog
      :closeOnClickModal="false"
      class="bin_dialog"
      title="编辑表单"
      :visible.sync="tableEditVisible"
      width="1000px"
      top="10vh"
      v-zsdialogDrag
    >
      <db-config-edit
        @cancel="tableEditVisible = false"
        :pageshow="tableEditVisible"
        :tableAndHeader="{ table: rightSelectItem, header: editTableHeader }"
        @confirm="editTableCommit"
      ></db-config-edit>
    </el-dialog>
    <el-dialog
      :closeOnClickModal="false"
      class="bin_dialog dialogh9"
      title="新建数据库表配置"
      :visible.sync="addDialogVisible"
      width="1200px"
      top="10vh"
      v-zsdialogDrag
    >
      <db-config
        @cancel="addDialogVisible = false"
        ref="ddbb"
        @confirm="addDb"
      ></db-config>
    </el-dialog>
    <el-dialog
      :closeOnClickModal="false"
      class="bin_dialog"
      title="添加数据"
      :visible.sync="addDataShow"
      width="1000px"
      top="10vh"
      v-zsdialogDrag
    >
      <add-data
        @cancel="addDataShow = false"
        :header="tableHeader"
        @confirm="addConfirm"
      ></add-data>
    </el-dialog>
    <el-dialog
      :closeOnClickModal="false"
      class="bin_dialog dialog-1000"
      title="筛选"
      :visible.sync="filterDialogShow"
      width="800px"
      top="10vh"
      v-zsdialogDrag
    >
      <div>
        <div
          class="filterItem"
          v-for="(item, index) in headerFilter"
          :key="index"
        >
          <template
            v-if="item.columnType == 'DATE' && item.columnDisplay === '1'"
          >
            <el-checkbox-group
              v-model="item.checked"
              class="bin_checkout"
              @change="filterCheckChange(index)"
            >
              <el-checkbox> {{ item.columnName }}： </el-checkbox>
            </el-checkbox-group>
            <el-date-picker
              class="bin_datetime"
              popper-class="bin_datetime_popper"
              v-model="item.value"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 250px !important"
              @change="filterDateChange(index)"
            >
            </el-date-picker>
          </template>
          <template
            v-if="item.columnType != 'DATE' && item.columnDisplay === '1'"
          >
            <el-checkbox-group
              v-model="item.checked"
              class="bin_checkout"
              @change="filterCheckChange(index)"
            >
              <el-checkbox> {{ item.columnName }}： </el-checkbox>
            </el-checkbox-group>
            <el-select
              class="bin_select"
              v-model="item.value"
              placeholder="请选择"
              clearable
              filterable
              style="width: 250px !important"
              @change="filterSelectChange(index)"
            >
              <template v-for="(item1, index1) in item.options">
                <el-option :key="index1" :label="item1" :value="item1">
                </el-option>
              </template>
            </el-select>
          </template>
        </div>
      </div>
      <div class="edit_btns">
        <el-button
          class="bin_button"
          size="small"
          @click="filterDialogShow = false"
        >
          取消
        </el-button>
        <el-button class="bin_button" size="small" @click="filterSearch">
          确认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      :closeOnClickModal="false"
      class="bin_dialog dialog-1000"
      title="操作记录"
      :visible.sync="recordDialogShow"
      width="900px"
      top="10vh"
      v-zsdialogDrag
    >
      <el-table
        :border="true"
        :data="recordTable"
        tooltip-effect="dark"
        style="width: 100%"
        height="300"
        class="bin_table"
      >
        <el-table-column resizable label="操作人" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.operator_user }}
          </template>
        </el-table-column>
        <el-table-column
          min-width="170"
          resizable
          prop="operator_date"
          label="操作时间"
          :formatter="formatTimestamp"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="170"
          resizable
          prop="operator_msg"
          label="操作记录"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.operator_msg }}
          </template>
        </el-table-column>
      </el-table>
      <div class="edit_btns">
        <el-button
          class="bin_button"
          size="small"
          @click="recordDialogShow = false"
        >
          取消
        </el-button>
        <el-button
          class="bin_button"
          size="small"
          @click="recordDialogShow = false"
        >
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dbConfig from "../../../components/dbConfig";
import dbConfigEdit from "../../../components/dbConfigEdit";
import editDialog1 from "../../../components/editDialog1";
import addData from "../../../components/addData";
export default {
  name: "yuanshujuPage",
  components: { dbConfig, dbConfigEdit, editDialog1, addData },
  data() {
    return {
      currEditItem: {},
      rightSelectItem: null,
      editTableHeader: [],
      tableEditVisible: false,
      contextMenuVisible: false,
      contextMenuTop: 0,
      contextMenuLeft: 0,
      activeNames: "1",
      step: 1,
      addDialogVisible: false,
      filterDialogShow: false,
      editDialogVisible: false,
      addDataShow: false,
      currEdit: {},
      currCate: "",
      currDataTypeId: "",
      currPage: 1,
      pageSize: 10,
      total: 0,
      recordDialogShow: false,
      delDialogShow: false,
      leftTree: [],
      searchKeyWord: "",
      recordTable: [],
      headerFilter: [],
      tableHeader: [],
      tableData: [],
      tableH: 0,
      multipleSelection: [],
    };
  },
  created() {},
  mounted() {
    this.fetTableHeight();
    this.getLeftTree("init");
  },
  methods: {
    formatTimestamp(row, colum, cellValue) {
      if (!cellValue) return "";
      const date = new Date(cellValue);
      return date.toLocaleString();
    },
    handleMenuItemClick(v) {
      if (v == 1) {
        this.$api
          .selectByTableId({ dataTableId: this.rightSelectItem.dataTableId })
          .then((res) => {
            this.editTableHeader = res.result;
            this.tableEditVisible = true;
          });
      } else {
        this.$api.deleteTable(this.rightSelectItem.dataTableId).then((res) => {
          if (res.code == 200) {
            this.getLeftTree();
            if (this.currCate === this.rightSelectItem.dataTableId) {
              this.tableHeader = [];
              this.tableData = [];
            }
            this.$message({
              message: res.message,
              type: "success",
            });
          }
        });
      }
      this.contextMenuVisible = false;
    },
    showContextMenu(event, rightSelectItem) {
      event.preventDefault();

      this.contextMenuTop = event.clientY;
      this.contextMenuLeft = event.clientX;
      this.rightSelectItem = rightSelectItem;
      this.contextMenuVisible = true;

      setTimeout(() => {
        this.contextMenuVisible = false;
      }, 2000);
    },
    changePage(val) {
      this.currPage = val;
      this.leftTreeGetTable();
    },
    handleSizeChange(val) {
      this.currPage = 1;
      this.pageSize = val;
      this.leftTreeGetTable();
    },
    editDb() {},
    addDb(form) {
      this.$api.addDataStructure(form).then((res) => {
        if (res.code == 200) {
          this.addDialogVisible = false;
          this.getLeftTree();
          this.$message({
            message: "添加成功",
            type: "success",
          });
        }
      });
    },
    addConfirm(form) {
      this.$api
        .insertDynamicData({ rowValues: form, dataTableId: this.currCate })
        .then((res) => {
          if (res.code == 200) {
            this.addDataShow = false;
            this.leftTreeGetTable();
            // 提示用户
            this.$message({
              message: "添加成功",
              type: "success",
            });
          }
        });
    },
    clickLeftTreeItem(tableId, typeid) {
      this.currCate = tableId;
      this.currPage = 1;
      this.currDataTypeId = typeid;
      this.leftTreeGetTable();
    },
    leftTreeGetTable() {
      Promise.all([
        this.$api.selectByTableId({ dataTableId: this.currCate }),
        this.$api.findList({
          pageNum: this.currPage,
          pageSize: this.pageSize,
          dataTableId: this.currCate,
          searchContent: this.searchKeyWord,
        }),
      ]).then((res) => {
        if (res[0].code == 200) {
          this.tableHeader = JSON.parse(JSON.stringify(res[0].result));
        }
        if (res[1].code == 200) {
          let result = JSON.parse(res[1].result);
          this.tableData = result.content;
          this.total = result.totalSize;
        }
      });
    },
    getLeftTree(isInit) {
      this.$api.ysjtqGetFileTypeApi(3).then((res) => {
        if (res.code == 200) {
          this.leftTree = res.result;
          this.getLeftTree1();
          if (isInit == "init") {
            this.$nextTick(() => {
              const type = this.$route.query.type;
              if (type) {
                let typeItem = this.leftTree.filter(
                  (e) => e.databaseTypeName == type
                )[0];
                this.activeNames = [typeItem.databaseType];
              }
            });
          }
        }
      });
    },
    getLeftTree1() {
      this.$api.getDataTableByType().then((res) => {
        if (res.code == 200) {
          for (let i = 0; i < this.leftTree.length; i++) {
            const element = this.leftTree[i];
            element.dataTypeVoList.map((e) => {
              e.children = res.result.filter((e1) => {
                return e1.dataTypeId == e.dataTypeId;
              });
            });
          }
          this.$forceUpdate();
        }
      });
    },
    addyuan() {
      if (this.currCate) {
        this.addDataShow = true;
      } else {
        this.$message({
          message: "请从左侧选择数据库表",
          type: "warning",
        });
      }
    },
    filterDateChange(index) {
      this.$set(this.headerFilter, index, this.headerFilter[index]);
      this.$forceUpdate();
    },
    filterSelectChange(index) {
      this.$set(this.headerFilter, index, this.headerFilter[index]);
      this.$forceUpdate();
    },
    filterCheckChange(index) {
      this.$set(this.headerFilter, index, this.headerFilter[index]);
      this.$forceUpdate();
    },
    filterShow() {
      if (this.currCate) {
        this.getListCondition();
      } else {
        this.$message({
          message: "请从左侧选择数据库表",
          type: "warning",
        });
      }
    },
    getListCondition() {
      this.$api
        .findListQueryCondition({ dataTableId: this.currCate })
        .then((res) => {
          if (res.code == 200) {
            this.filterDialogShow = true;
            if (res.result) {
              let result = JSON.parse(JSON.stringify(res.result));
              this.headerFilter = this.tableHeader.map((e) => {
                e.checked = false;
                e.options = result[e.columnCode];
                e.value = "";
                return e;
              });
            } else {
              this.headerFilter = this.tableHeader.map((e) => {
                e.checked = false;
                e.options = [];
                e.value = "";
                return e;
              });
            }
          }
        });
    },
    filterSearch() {
      console.log(this.headerFilter, "headerFilter");
      let obj = this.headerFilter
        .filter((item) => item.checked) // 只保留 checked 为 true 的项
        .reduce((acc, item) => {
          acc[item.columnCode] = item.value; // 假设你想要的是 value 属性
          return acc;
        }, {});
      console.log(obj, "obj");
      this.currPage = 1;
      this.editcall(obj);
    },
    adddialogshow() {
      this.addDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.ddbb.clear();
      });
    },
    editCommit(form) {
      let data = {
        dataTableId: this.currCate,
        dataRowKid: form.kid,
        rowValues: form,
      };
      console.log("form==", form);
      this.editDialogVisible = false;
      this.$api.updateDynamicData(data).then((res) => {
        if (res.code == 200) {
          this.editcall();
          this.$message({
            message: res.message,
            type: "success",
          });
        }
      });
    },
    editTableCommit(form) {
      this.tableEditVisible = false;
      this.$api.updateTableInfo(form).then((res) => {
        if (res.code == 200) {
          this.getLeftTree();
          if ((this.currCate = this.rightSelectItem.dataTableId)) {
            this.editcall();
          }
          this.$message({
            message: res.message,
            type: "success",
          });
        }
      });
    },
    // 单独查表
    editcall(obj) {
      let value = {
        pageNum: this.currPage,
        pageSize: 10,
        dataTableId: this.currCate,
        searchContent: this.searchKeyWord,
      };
      let mergedObj = value;
      if (obj) {
        mergedObj = Object.assign(value, obj);
      }
      this.$api.findList(mergedObj).then((res) => {
        if (res.code == 200) {
          let result = JSON.parse(res.result);
          this.tableData = result.content;
          this.total = result.totalSize;
          this.filterDialogShow = false;
        }
      });
    },
    editFn(row) {
      this.currEditItem = row;
      this.editDialogVisible = true;
    },
    handleChange() {},
    record(row) {
      // console.log('当前行==',row);
      this.$api
        .getColHis({ dataTableId: this.currCate, kid: row.kid })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.recordTable = res.result;
            this.recordDialogShow = true;
          }
        });
    },
    deleteTableData(ids) {
      this.$api
        .removeDynamicDatas({ dataRowKids: ids, dataTableId: this.currCate })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.leftTreeGetTable();
          }
        });
    },
    batDelete() {
      if (this.currCate) {
        let selected = this.$refs.multipleTable.selection;
        if (selected.length) {
          this.$confirm("确认删除本条数据吗？?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {})
            .catch(() => {});
        } else {
          this.$message({
            message: "请选择数据",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "请从左侧选择数据库表",
          type: "warning",
        });
      }
    },
    delete1(row) {
      console.log(row);
      this.$confirm("确认删除本条数据吗？?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteTableData([row.kid]);
        })
        .catch(() => {});
    },
    resetHeight() {
      return new Promise((resolve, reject) => {
        this.tableH = 0;
        resolve();
      });
    },
    fetTableHeight() {
      this.resetHeight().then((res) => {
        this.tableH = this.$refs.tableBox.getBoundingClientRect().height - 10;
      });
    },
    clickSearch() {
      if (this.currCate) {
        this.currPage = 1;
        this.leftTreeGetTable();
      } else {
        this.$message({
          message: "请从左侧选择数据库表",
          type: "warning",
        });
      }
    },
    fileDownload(res, filename) {
      let blob = new Blob([res.data]); // 将返回的数据通过Blob的构造方法，创建Blob对象
      if ("msSaveOrOpenBlob" in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, filename); // 针对浏览器
      } else {
        const elink = document.createElement("a"); // 创建a标签
        elink.download = filename;
        elink.style.display = "none";
        // 创建一个指向blob的url，这里就是点击可以下载文件的根结
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); //移除链接
        document.body.removeChild(elink); //移除a标签
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCommand(command) {
      if (command == "excel") {
        this.exprotModelFn1();
      } else if (command == "file") {
        this.downMulPerFile();
      }
    },
    downMulPerFile() {
      if (this.currCate) {
        let obj = {
          dataTableId: this.currCate,
          dataRowKids: this.multipleSelection.map((item) => item.kid),
        };
        if (this.multipleSelection.length) {
          const pArr = this.multipleSelection.map((item) => {
            return this.$api.downloadOneFile({
              fileSource: item["文件来源"] + item["文件名称"],
            });
          });
          Promise.all(pArr).then((res) => {
            console.log(res);
            res.map((item, index) => {
              const url = window.URL.createObjectURL(new Blob([res[index]]));
              const link = document.createElement("a");
              link.href = url;
              link.download = this.multipleSelection[index]["文件名称"];
              link.click();
            });

            this.$message({
              message: "导出成功",
              type: "success",
            });
          });
        }
      } else {
        this.$message({
          message: "请从左侧选择数据库表",
          type: "warning",
        });
      }
    },
    exprotModelFn() {
      if (this.currCate) {
        let obj = {
          dataTableId: this.currCate,
          dataRowKids: this.multipleSelection.map((item) => item.kid),
        };
        this.$api.downloadDataInfo(obj).then((res) => {
          console.log(res);

          const url = window.URL.createObjectURL(new Blob([res]));
          const link = document.createElement("a");
          link.href = url;
          link.download = `file.xlsx`;
          if (this.currDataTypeId == "9") {
            link.download = `file.zip`;
          }
          link.click();
          this.$message({
            message: "导出成功",
            type: "success",
          });
        });
      } else {
        this.$message({
          message: "请从左侧选择数据库表",
          type: "warning",
        });
      }
    },

    exprotModelFn1() {
      if (this.currCate) {
        let obj = {
          dataTableId: this.currCate,
          dataRowKids: this.multipleSelection.map((item) => item.kid),
        };
        this.$api.downloadDataInfo1(obj).then((res) => {
          console.log(res);

          const url = window.URL.createObjectURL(new Blob([res]));
          const link = document.createElement("a");
          link.href = url;
          link.download = `file.xlsx`;
          link.click();
          this.$message({
            message: "导出成功",
            type: "success",
          });
        });
      } else {
        this.$message({
          message: "请从左侧选择数据库表",
          type: "warning",
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-pagination__rightwrapper {
  display: flex;
  align-items: center;
}
.edit_btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

.database_wrap {
  width: 100%;
  height: 100%;
  --left-width: 20%;
  --head-title: 50px;

  .itemLefthead {
    width: 100%;
    display: flex;
    height: var(--head-title);
    background: rgba(2, 255, 244, 0.15);
    border-radius: 0px 0px 0px 0px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    line-height: 59px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    text-indent: 31px;
    position: relative;
    align-items: center;
    justify-content: space-between;

    &::before {
      width: 5px;
      height: 20px;
      background: #02fff4;
      border-radius: 0px 0px 0px 0px;
      position: absolute;
      left: 20px;
      top: 16px;
      content: "";
    }

    .addBtn {
      width: 100px;
      height: 45px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      line-height: 45px;
      font-style: normal;
      text-transform: none;
      text-indent: 44px;
      background: url("../../../assets/btn.png") center center no-repeat;
      background-size: 100% 100%;
      margin-right: 10px;
      cursor: pointer;
      position: relative;

      &::before {
        width: 18px;
        height: 18px;
        background: url("../../../assets/addjia.png") center center no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 20px;
        top: 13px;
        content: "";
      }
    }

    .calcImport {
      text-indent: 24px;
      margin-right: 20px;

      &::before {
        width: 18px;
        height: 18px;
        background: url("../../../assets/expot.png") center center no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 20px;
        top: 10px;
        content: "";
      }
    }
  }

  .left {
    height: 100%;
    width: 20%;
    float: left;

    .itemLeft {
      width: 100%;
      height: 100%;
      background: rgba(2, 82, 107, 0.6);
      border: 1px solid #02fff4;

      .itemList {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        height: calc(100% - 50px);
        overflow: scroll;

        ::v-deep .collList {
          border: none;

          .el-collapse-item__header {
            padding-left: 16px;
            font-weight: 400;
            font-size: 18px;
            background: rgba(2, 255, 244, 0.1);
            color: #a2fffb;
            border: 1px solid #02fff4;
            margin-bottom: 10px;
            box-shadow: inset 0px 0px 25px 1px #02fff4;
            border-radius: 5px;
          }

          .el-collapse-item__wrap {
            background-color: transparent;
            border-bottom: none;

            .listitem {
              width: 100%;
              box-sizing: border-box;
              color: #fff;
              padding: 0 16px;
              background-color: #031722;
              margin-bottom: 10px;
              box-sizing: border-box;
              height: 40px;
              line-height: 40px;
              border-radius: 3px;
              box-shadow: inset 0px 0px 25px 1px #02fff4;
              // border: 1px solid #02fff4;
            }

            .item {
              width: 100%;
              box-sizing: border-box;
              cursor: pointer;
              color: #fff;
              padding: 0 16px;
              margin-left: 10px;
              background-color: #031722;
              margin-bottom: 10px;
              box-sizing: border-box;
              height: 30px;
              line-height: 30px;
              border-left: 5px solid transparent;

              &.act {
                border-left-color: #02fff4;
              }
            }
          }
        }

        .context-menu {
          position: absolute;
          background: #031722;
          border-radius: 4px;
          border: 1px solid #02fff4;
          list-style-type: none;
          padding: 0;
          margin: 0;
        }

        .context-menu ul li {
          padding: 5px 10px;
          cursor: pointer;
          color: #fff;
        }

        .context-menu ul li:hover {
          background-color: #02fff4;
        }
      }
    }
  }

  .right {
    .itemLefthead1 {
      width: 100%;
      display: flex;
      position: relative;
      align-items: center;
      justify-content: space-between;
      height: 80px;

      .searchBox {
        width: 100%;
        height: 40px;
        margin-bottom: 10px;

        ::v-deep .el-input-group__append,
        .el-input-group__prepend {
          background-color: transparent;
          border: none;
        }
      }

      .btn_gro {
        display: flex;

        .btn1 {
        }
      }
    }

    height: 100%;
    width: calc(100% - var(--left-width) - 20px);
    float: right;

    .itemList {
      background: rgba(2, 82, 107, 0.6);
      border: 1px solid #02fff4;
      width: 100%;
      height: calc(100% - 80px);
      padding: 20px;
      box-sizing: border-box;

      .tableBox {
        height: calc(100% - 45px);

        .docImg {
          width: 20px;
          height: 25px;
        }
      }

      .actBtn {
        cursor: pointer;
        width: 24px;
        height: 24px;
        margin-right: 10px;

        &:last-child {
          margin: 0;
        }
      }

      .pageBox {
        height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .bin_fenyeqi {
          display: block !important;
          width: 100%;
        }

        .pageInfo {
          height: 18px;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #ffffff;
          text-align: center;
          font-style: normal;
          text-transform: none;

          .size {
            color: #02fff4;
          }
        }
        .dropModel {
          width: 30px;
          height: 30px;
          cursor: pointer;

          .name {
            margin: 0 8px;
            color: #acd5ff;
            font-size: 14px;
          }

          .icon {
            font-size: 16px;
            color: #acd5ff;
          }
        }
      }
    }

    .btn {
      width: auto;
      height: 40px;
      padding-top: 10px;
      padding-bottom: 10px;
      box-shadow: inset 0px 0px 15px 1px #02fff4;
      background-color: transparent;
      outline: none;
      border: 1px solid #02fff4;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      font-style: normal;
      text-transform: none;
      cursor: pointer;
      position: relative;
    }

    .addBtnexport {
      width: 100px;
      height: 45px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      line-height: 45px;
      font-style: normal;
      text-transform: none;
      text-indent: 44px;
      background: url("../../../assets/btn.png") center center no-repeat;
      background-size: 100% 100%;
      margin-right: 10px;
      cursor: pointer;
      position: relative;

      &::before {
        width: 18px;
        height: 18px;
        background: url("../../../assets/exporticon.png") center center
          no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 20px;
        top: 13px;
        content: "";
      }
    }
  }

  .filterItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .algorithm_dialog {
    ::v-deep .el-dialog__body {
      padding: 0;
    }
  }
}
</style>

<style lang="scss" scoped>
.el-dropdown-menu {
  max-height: 500px !important;
  background: rgba(7, 47, 70, 0.95);
  border-radius: 0px 0px 0px 0px;
  border: 0;
}

.el-dropdown-menu__item {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 17px;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background: inherit;
  color: #02fff4;
}
.el-popper .popper__arrow::after {
  display: none !important;
}
</style>
